<template>
    <div id="disease-body">

    <div id="disease-left">
        <div id="disease-left-search">
            <el-input
                    v-model="queryDisease"
                    style="width:90%;align-self: center"
                    placeholder="请输入名字或者症状;、号隔开"
                    :prefix-icon="Search"
                    @input.native="search($event, queryDisease)"

            />
        </div>
        <div id="disease-left-list">
            <el-table :data="diseaseStore.diseaseList" style="width: 100%" >

                <el-table-column label="名字" width="180"  >
                    <template #default="scope">
                        <!--                        {{scope.row.diseaseSymptoms}}-->
                        <p v-html="getInlineStyle(scope.row.diseaseName)"  @click="getInfo(scope.row)"></p>
                    </template>
                </el-table-column>


                <el-table-column  label="症状" width="761">
                    <template #default="scope">
<!--                        {{scope.row.diseaseSymptoms}}-->
                      <p v-html="getInlineStyle(scope.row.diseaseSymptoms)" @click="getInfo(scope.row)"></p>
                    </template>

                </el-table-column>


                <el-table-column width="110"  label="操作">
                    <template #default="scope">
                        <el-button type="info" plain @click="getInfo(scope.row)">了解详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--        <p v-for="item in diseaseStore.diseaseList"> {{item.diseaseName}}:{{item.diseaseSymptoms}}</p>-->
        </div>
    </div>


    <div id="disease-right">
        <div style="height: 50px;text-align: center;font-size: 30px">
            最热
        </div>
        <div
            v-for="item in diseaseStore.top5Disease"
            style="display: flex;cursor: pointer;"
            @click="getInfo(item)"
        >
            <div style="margin: 5px 20px;text-align: left;width:250px;background-color: rgba(0,145,238,0.04)">  {{item.diseaseName}}:</div>
            <div>{{item.diseaseSearchCount}}</div>
        </div>

    </div>



    </div>

    <el-dialog :title="title" v-model="open3" width="50%" append-to-body center="true" @closed="jiBingClose()">

    <template #header>
        <div class="dialog-footer" style="font-size: 25px">
            {{title}}
        </div>
    </template>
        <div id="disease-info">
            <p>  <span>物种：&ensp;&ensp;&ensp;&ensp; </span>{{diseaseStore.disease.petSpecies}}</p>
            <p>  <span>症状：&ensp;&ensp;&ensp;&ensp; </span>{{diseaseStore.disease.diseaseSymptoms}}</p>
            <p>  <span>发病原因：</span>{{diseaseStore.disease.diseaseCause}}</p>
            <p>  <span>治疗方法：</span>{{diseaseStore.disease.diseaseTreatment}}</p>
        </div>
    </el-dialog>
<br/><br/><br/>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import useDiseaseStore from "@/store/modules/disease";
    import {  Search } from '@element-plus/icons-vue'


    const diseaseStore = useDiseaseStore()

    diseaseStore.getDiseaseList()
    diseaseStore.getTop5Disease()


    const open3 = ref(false)
    const title = ref("")
    const jiBingClose=()=> {
        diseaseStore.getDiseaseList()
        diseaseStore.getTop5Disease()
    }
    //了解详情
    function getInfo(disease:any){
        title.value = disease.diseaseName
        diseaseStore.getInfo(disease)
        open3.value = true
    }


    const queryDisease = ref("")
    const search = (e:any ,text:string)=>{
        // console.log(diseaseStore.diseaseListGEN)
        //存储符合要求的对象
        let searchResult = [] as API.Disease[]
        //遍历全部疾病信息
       diseaseStore.diseaseListGEN.forEach((disease:API.Disease) => {
            // console.log(disease);
           JSON.parse(JSON.stringify(disease))
           // console.log(disease);
            // 在这里可以对每个疾病对象进行操作
             if(disease.diseaseName.includes(text)){
                 searchResult.push(JSON.parse(JSON.stringify(disease)))

             }else if(disease.diseaseSymptoms.includes(text)){
                 searchResult.push(JSON.parse(JSON.stringify(disease)))
             }else{
                 // console.log("不符合")
             }
        });
        // console.log(searchResult)
        diseaseStore.$patch((state:any) => {
            state.diseaseList = searchResult;
        });
        // console.log(diseaseStore.diseaseList)
    }
    //搜索内容部分高亮显示
    const getInlineStyle = (text:string) => {
// 假设要将字符串中的特定字符'abc'变为红色字体并加粗
        return text.replace(queryDisease.value, '<span style="color: red; font-weight: bold;">'+queryDisease.value+'</span>');

    };




</script>

<style scoped>
    #disease-body{
        /*background-color: #42b983;*/
        display: flex;
    }
    #disease-left{
        /*background-color: #48D1CC;*/
        width:70%;
    }

    #disease-left-search{
        /*background-color: #d16246;*/
        width:70%;
        height: 50px;
        margin: auto;
    }






    #disease-right{
        background-color: #ffffff;
        width:26%;
        margin: 5px 2%;
    }

</style>
